<template>
  <div> 
    <HeaderNav :title="$t('m.headernav.SENTGIFT') " :showBack='true' />
    
    <div style="margin-top: 5vh">
    <div v-if="list.length > 0" >
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        :offset='10'
        v-model="loading"
        :finished="finished"
        :finished-text="$t('m.msg.MSG6')"
        :error.sync="error"
        :error-text="$t('m.msg.MSG7')"
        @load="loadData"
      >
      <div class="emojilist_container">
        <div class="emojilist_box" v-for="(item,index) in list" :key="index">
        <img :src="translateTab < 2 ? item.path: item.httpPath" class="emojilist_img" />
        <div class="emojilist_name">{{item.name}}</div>
        <div class="emojilist_info">{{item.info}}</div>
        <div class="emojilist_price">{{$t('m.msg.DIAMOND')}}:{{formatMoney(item.price)}}</div>
        <div class='send_btn' @click="showSend(item)">{{$t('m.msg.SENDGIFT_BTN')}}</div>
      </div>
       </div>
      </van-list>
      </van-pull-refresh>

      <!-- 赠送弹框 -->
      <van-popup closeable v-model="dialogFlag" class="popup">
        <div>{{translateTab == 2?$t('m.msg.MSG105'):$t('m.headernav.SENTGIFT')}}</div>
        <img :src="translateTab < 2 ? gift.path: gift.httpPath" class="popup_img" />
        <div class="emojilist_name">{{gift.name}}</div>
        <div>{{gift.info}}</div>
        <div class="emojilist_name">{{$t('m.msg.MSG86')}}：{{num * gift.price}}</div>
        <div class="emojilist_name" v-show="translateTab < 2">{{$t('m.msg.NUM')}}：{{num}}</div>
        <div class='select_num' v-show="translateTab < 2">
          <div class='select_add' @click.stop='addNum()'>+</div>
          <div class='select_add' @click.stop='subtractNum()'>-</div>
        </div>
        <div class="popup_footer">
          <div @click="dialogFlag = false"  class="popup_btn">{{$t('m.msg.CANCEL_BTN')}}</div>
           <div type="primary" @click="sendGift" class="popup_btn">{{$t('m.msg.SENDGIFT_BTN')}}</div>
        </div>
      </van-popup>
    </div>
    <div v-else>
       <img src="../../assets/img/nonedata.png" class="nonedata"/>
     </div>
     </div>
     <!-- 导航 -->
    <div class="translate_tab">
        <div :class="`${translateTab == 0 ? 'translate_tab_item_sel' : 'translate_tab_item'}`" @click="changeTab(0)" >{{$t('m.msg.MSG97')}}</div>
        <div :class="`${translateTab == 1 ? 'translate_tab_item_sel' : 'translate_tab_item'}`" @click="changeTab(1)" >{{$t('m.msg.MSG98')}}</div>
        <div :class="`${translateTab == 2 ? 'translate_tab_item_sel' : 'translate_tab_item'}`" @click="changeTab(2)" >{{$t('m.msg.MSG105')}}</div>
    </div>
  </div>
</template>

<script>
	import {
    List,
    PullRefresh,
    Popup  
  } from 'vant';
import HeaderNav from '@/components/HeaderNav.vue'
import {postQuery,postQuery2, getQuery, formatMoney} from '@/api/query';
export default {
  name: 'sendGift',
  components: {
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [Popup.name]: Popup,
    HeaderNav
  },
  data(){
    return {
      page: 1,
      list:[],
      pages: 0,
      loading: false,
      error: false,
      finished: false,
      refreshing: false,
      pageSize: 16,
      gift: {},//赠送的礼物
      memberId: 0,//赠送人id
      num: 1,
      translateTab: 0,//切换
      dialogFlag: false
    }
  },
  methods: {
    changeTab(val){
      let that = this
        that.translateTab = val
        that.onRefresh();
        
    },
    formatMoney(money){
      return formatMoney(money);
    },
    //加载数据
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      //初始化
      this.pages = 0;
      this.list = [];
      this.page = 1;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.loadData();
    },
    //选择数量
    addNum(index){
      let that = this;
      that.num ++;
    },
    subtractNum(index){
      let that = this;
      if(that.num > 1){
        that.num --;
      }
    },
    //点击弹框
    showSend(gift){
      this.dialogFlag = true;
      this.gift = gift;
    },
    //点击赠送
    sendGift(){
      var that = this;
      if(that.translateTab < 2){
        let params = {
          memberId: that.memberId, //赠送id
          giftId: that.gift.id, //礼物id
          num: that.num//数量
        }
        postQuery2('/member/gift/give', params)
          .then (res => {
            if(res.code == 200){
              that.$toast.fail(that.$i18n.t('m.msg.SENDGIFT_SUCCESS'));
              //that.$router.go(-1);
            }else{
              that.$toast.fail(res.msg);
            }
          })
      }else{
        postQuery('/member/expression/give/'+that.memberId+'/'+that.gift.id)
          .then (res => {
            if(res.code == 200){
              that.$toast.fail(that.$i18n.t('m.msg.SENDGIFT_SUCCESS'));
              //that.$router.go(-1);
            }else{
              that.$toast.fail(res.msg);
            }
          })
      }
      that.dialogFlag = false
      
    },
    loadData(){
      var that = this;
      if(that.pages > 0 && that.page > that.pages){
        that.finished = true;
      }
      let params = {
        pageNumber: that.page,
        pageSize: that.pageSize
      }
      let url = "";
      if(that.translateTab < 2){
        if(that.translateTab == 0){
          url = "/member/gift/list"
        }else{
          url = "/member/gift/list/fictitious"
        }
        getQuery(url, params)
        .then (res => {
          if(res.code == 200){
            //如果数据不够finished
            if(res.data.records.length < that.pageSize){
              that.finished = true;
            }
            that.list = that.list.concat(res.data.records)
            that.pages = res.data.pages;
            that.page ++;
            that.loading = false;
            that.refreshing = false;
          }else{
            that.$toast.fail(res.msg);
            that.finished = true;
          }
        }).catch(function (error) {
          that.error = true;     
        });
      }else{
        url = "/member/expression/list"
        postQuery(url, params)
        .then (res => {
          if(res.code == 200){
            //如果数据不够finished
            if(res.data.records.length < that.pageSize){
              that.finished = true;
            }
            that.list = that.list.concat(res.data.records)
            that.pages = res.data.pages;
            that.page ++;
            that.loading = false;
            that.refreshing = false;
          }else{
            that.$toast.fail(res.msg);
            that.finished = true;
          }
        }).catch(function (error) {
          that.error = true;     
        });
      }

      
    }
  },
  created(){
    this.loadData()
    this.memberId = this.$route.query.memberId
    //将这个事件重新给全局app.vue
      this.$parent.$data.ws.onmessage = that.$parent.getMessage;
  }
}
</script>
<style scoped>
	.emojilist_container{
		display: flex;
		flex-wrap: wrap;
	}

  .emojilist_box{
    height: 24vh;
    width: 22vw;
    margin-left: 20px;
    margin-top: 20px;
    text-align: center;
  }

  .emojilist_img{
    height: 40%;
    width: 60%;
  }

  .emojilist_name{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* 文本不换行，这样超出一行的部分被截取，显示... */
  }

  .emojilist_info{
    font-size: 26px;
    color: #a1a1a1;
    display: -webkit-box;
    -webkit-line-clamp:2;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
  }

  .send_btn{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background-color: #ff7300;
    color: white;
    font-size: 18px;
    height: 50px;
    width:100px;
    margin: 10px 20%;
  }

  .popup_footer{
    display: flex;
    margin-top: 10%;
    justify-content:space-between;
    width: 60%;
    margin-left: 20%;
  }

  .popup_btn{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background-color: #ff7300;
    color: white;
    font-size: 20px;
    height: 60px;
    width: 100px;
  }

  .popup{
    width: 70vw;
    /* height: 30vh; */
    text-align: center;
    font-size: 32px;
     color: #a1a1a1; 
    padding: 20px 20px;
  }

  .select_num{
    display: flex;
    justify-content: space-between;
    width: 110px;
    margin: 20px 40%;
  }

  .select_add{
    width: 40px;
    height: 20px;
    font-size: 10px;
    border-radius: 3px;
    border: 2px #a1a1a1 solid;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .popup_img{
    width: 20%;
    height: 20%;
  }

  .translate_tab{
      display: flex;
      position: fixed;
      top: 8vh;
      left: 0;
      width: 100vw;
      height: 5vh;
      font-size: 28px;
      line-height: 5vh;
      text-align: center;
  }

  .translate_tab_item_sel{
      background-color: #01d2ff;
      width: 33%;
      color: white;
  }

  .translate_tab_item{
      background-color: white;
      width: 33%;
      color: black;
  }

</style>




  <!--<template>
 <div> 
    <div class="nav_container">
	  	<div class="nav_img_container">
	  		<img src="../../assets/img/back.png" class="nav_img" v-on:click="back()"/>
	  	</div>
			<div class="nav_title">礼物</div>
			<div class="nav_btn">真实礼物</div>
  	</div>
    <div class="sendgift_container" v-if="list.length > 0" >
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        :offset='10'
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="loadData"
      >
      <div class="sendgift_box">
        <img src="../../assets/img/header.png" class="sendgift_img" />
        <div class="sendgift_txt">惹人喜爱的哈哈哈哈哈</div>
        <div class="sendgift_price">金钻:169.0</div>
      </div> 
    </van-list>
      </van-pull-refresh>
    </div>
    <div v-else>
       <img src="../../assets/img/nonedata.png" class="nonedata"/>
     </div>
  </div>
</template>

<script>
// 	import {
//     List,
//     PullRefresh 
//   } from 'vant';
// import HeaderNav from '@/components/HeaderNav.vue'
// export default {
//   name: 'sendGift',
//   components: {
//     [List.name]: List,
//     [PullRefresh.name]: PullRefresh,
//     HeaderNav
//   },
//   data(){
//     return {
//       page: 1,
//       list:[],
//       pages: 0,
//       loading: false,
//       error: false,
//       finished: false,
//       refreshing: false
//     }
//   },
//   methods: {
//     //加载数据
//     onRefresh() {
//       // 清空列表数据
//       this.finished = false;
//       //初始化
//       this.pages = 0;
//       this.list = [];
//       this.page = 1;
//       // 重新加载数据
//       // 将 loading 设置为 true，表示处于加载状态
//       this.loading = true;
//       this.loadData();
//     },
//     loadData(){
//       var that = this;
//       if(that.pages > 0 && that.page > that.pages){
//         that.finished = true;
//       }
//       let params = {
//         page: that.page
//       }
//       return;
//       getQuery('/member/gift/list', params)
//         .then (res => {
//           if(res.code == 200){
//             //如果数据不够finished
//             if(res.data.records.length < 10){
//               that.finished = true;
//             }
//             that.list = that.list.concat(res.data.records)
//             that.pages = res.data.pages;
//             that.page ++;
//             that.loading = false;
//             that.refreshing = false;
//           }else{
//             that.$toast.fail(res.msg);
//             that.finished = true;
//           }
//         }).catch(function (error) {
//           that.error = true;     
//         });
//     },
//     back(){
// 	  	this.$router.go(-1)
// 	  }
//   }
// }
// </script>
// <style scoped>
	
// 	.nav_container{
//     position: fixed;
//     width: 100%;
//     background: #fff;
//     box-shadow: 2px 2px 12px #ccc;
//     left: 0;
//     top: 0;
//     z-index: 999;
//     display: flex;
//     height: 8vh;
//     font-size: 32px;
//     font-weight: 550;
//     display: flex;
//     align-items: center;
// 	}
	
// 	.nav_img_container{
// 		width: 50px;
// 		display: flex;
// 		justify-content: flex-end;
// 	}
	
// 	.nav_img{
// 		height: 40px;
// 		width: 40px;
// 		/*margin-left: 10px;*/
// 	}
	
// 	.nav_title{
// 		margin-left: 40vw;
// 	}
	
// 	.nav_btn{
// 		height: 60px;
// 		width: 120px;
// 		border-radius: 10px;
// 		color: white;
// 		background-color: #1dc116;
// 		font-size: 16px;
// 		text-align: center;
// 		line-height: 60px;
// 		margin-left: 22vw;
// 	}
	
// 	.sendgift_container{
// 		display: flex;
// 		flex-wrap: wrap;
// 		justify-content: space-around;
// 		padding: 3vw 2vh;
// 	}

//   .sendgift_box{
//     height: 25vh;
//     width: 28vw;
//   }

//   .sendgift_img{
//     height: 50%;
//     /*width: 80%;*/
//   }

//   .sendgift_txt{
//     overflow: hidden;
//     text-overflow: ellipsis;
//     white-space: nowrap; /* 文本不换行，这样超出一行的部分被截取，显示... */
//   }

// </style>
